import type { TableColumnProps, ProSaasTableExposeType } from '~/components/ProSaasTable/typings'
import type { patrolStatusEnum } from '~/store/oam/typings'
import type { PatrolsManageFormValuesType, PatrolsManageStateType } from './typings'
import { defineComponent, reactive, ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import {
  ElCard,
  ElTabs,
  ElTabPane,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElRow,
  ElCol,
  ElLink,
  ElButton,
  ElSpace,
  ElIcon
} from 'element-plus'
import { View } from '@element-plus/icons-vue'
import { SEARCH_FORM_COL_CONFIG } from '~/utils/const'
import SearchForm from '~/components/ProForm/SearchForm'
import ProSaasTable from '~/components/ProSaasTable'
import useVuexGetters from '~/hooks/useVuexGetters'
import styles from '../index.module.scss'

export default defineComponent(function PatrolsManage() {
  const store = useStore()
  // 初始化
  const proSaasTableRef = ref<ProSaasTableExposeType>()
  const formValues = reactive<PatrolsManageFormValuesType>({})
  const state = reactive<PatrolsManageStateType>({
    activeName: 'first',
    countAll: undefined,
    countToday: undefined,
    patrolMapVisible: false,
    visible: false
  })
  const patrolState = useVuexGetters('patrol', [
    'patrolStatusSelectList',
    'patrolStatusEnum',
    'isAssignEnum'
  ])
  const orderState = useVuexGetters('order', ['tenantUserEnum'])

  onMounted(() => {
    store.dispatch('order/GetTenantUserSelectList')
    handleGetOrderCountInfo()
  })

  // methods
  // 详情
  const details = () => {}

  // 切换地图显示
  const handleChangePatrolMapVisible = () => {}

  // 获取巡视历史统计数据
  const handleGetOrderCountInfo = () => {
    store.dispatch('patrol/GetPlancreatedToday').then((res) => {
      state.countToday = res?.data?.today ?? 0
    })
    store.dispatch('patrol/GetPatrolPlanListGet').then((res) => {
      state.countAll = res?.data?.total ?? 0
    })
  }

  // 表格字段
  const columns: TableColumnProps<PatrolsManageFormValuesType>[] = [
    {
      label: '巡视名称',
      prop: 'name',
      minWidth: 180,
      showOverflowTooltip: true,
      align: 'center'
    },
    {
      label: '责任人',
      prop: 'leadUserId',
      minWidth: 180,
      enumValues: orderState.tenantUserEnum,
      align: 'center'
    },
    {
      label: '台区数量',
      prop: 'coursCounts',
      minWidth: 180,
      align: 'center'
    },
    {
      label: '计划开始时间',
      prop: 'beginTime',
      minWidth: 180,
      align: 'center'
    },
    {
      label: '计划结束时间',
      prop: 'endTime',
      minWidth: 180,
      align: 'center'
    },
    {
      label: '完成情况',
      prop: 'status',
      minWidth: 180,
      enumValues: patrolState.patrolStatusEnum,
      align: 'center'
    },
    {
      label: '总巡视次数',
      prop: 'counts',
      minWidth: 180,
      align: 'center'
    },
    {
      label: '操作',
      prop: 'options',
      minWidth: 180,
      width: 70,
      align: 'center',
      render: () => (
        // { row }
        <ElSpace>
          <ElButton text type="primary" onClick={() => details()}>
            <ElIcon>
              <View />
            </ElIcon>
            &nbsp;详情
          </ElButton>
        </ElSpace>
      )
    }
  ]

  return () => {
    return (
      <ElCard>
        <ElTabs v-model={state.activeName} type="card">
          <ElTabPane label="巡视任务" name="first">
            <SearchForm
              searchFormProps={{
                model: formValues
              }}
              searchformResponsiveCol={[
                <ElFormItem key="status" prop="status" label="完成情况：">
                  <ElSelect v-model={formValues.status} placeholder="请选择完成情况" clearable>
                    {patrolState.patrolStatusSelectList?.value?.map((item: patrolStatusEnum) => (
                      <ElOption key={item?.value} label={item?.label} value={item?.value} />
                    ))}
                  </ElSelect>
                </ElFormItem>,
                <ElFormItem key="isAssign" prop="isAssign" label="指派情况：">
                  <ElSelect v-model={formValues.isAssign} placeholder="请选择指派情况" clearable>
                    <ElOption key={1} label="是" value={1} />
                    <ElOption key={0} label="否" value={0} />
                  </ElSelect>
                </ElFormItem>,
                <ElFormItem key="name" prop="name" label="巡视名称：">
                  <ElInput v-model={formValues.name} placeholder="请输入巡视名称" clearable />
                </ElFormItem>
              ]}
              handleSearchList={proSaasTableRef.value?.toSearch}
            />
            <hr style={'box-shadow: 4px 4px 4px lightGray;'} />
            <ProSaasTable<PatrolsManageFormValuesType>
              ref={proSaasTableRef}
              columns={columns}
              searchFormProps={{
                model: formValues
              }}
              dispatchType="patrol/GetPatrolPlanListGet"
            >
              <ElRow justify="space-between" class={styles['order-list-history-title']}>
                <ElCol class="order-history-introduction" {...SEARCH_FORM_COL_CONFIG}>
                  共计 <ElLink type="danger">{state?.countAll}</ElLink> 条数据， 今日新增{' '}
                  <ElLink type="danger">{state?.countToday}</ElLink> 条
                </ElCol>
                <ElCol class="order-history-btns" {...SEARCH_FORM_COL_CONFIG}>
                  <ElButton type="primary" onClick={handleChangePatrolMapVisible}>
                    切换地图显示
                  </ElButton>
                </ElCol>
              </ElRow>
            </ProSaasTable>
          </ElTabPane>
          <ElTabPane label="巡视记录" name="second">
            巡视记录
          </ElTabPane>
        </ElTabs>
      </ElCard>
    )
  }
})
